<template>
  <!-- 顶部标题区 -->
  <div class="page-header">
    <!-- 左侧返回按钮 -->
    <div class="back-card" @click="goBackToHome">
      <el-icon class="back-icon"><ArrowLeft /></el-icon>
      <span class="back-text">返回首页</span>
    </div>

    <!-- 中间标题 -->
    <div class="page-title">斋堂镇信息录入系统 · 用户手册</div>

    <!-- 右侧占位空div，用于居中效果 -->
    <div style="width: 120px;"></div>
  </div>

  <div class="user-manual" style="padding: 24px; max-width: 1000px; margin: auto;">

    <!-- 1. 系统简介 -->
    <section style="margin-bottom: 32px;">
      <h2>1. 系统简介</h2>
      <p>
        本系统用于统一管理各类建筑、人员及设备信息，支持数据录入、数据表结构管理、分类查询等功能，
        帮助管理员与工作人员高效完成信息管理任务。
      </p>
      <img src="/assets/manual/" alt="系统概览" style="width: 100%; max-width: 600px; margin-top: 12px;" />
    </section>

    <!-- 2. 首页 -->
    <section style="margin-bottom: 32px;">
      <h2>2. 首页</h2>
      <p>
        首页展示系统的核心统计信息，包括数据总表数、记录总数、各分类表格的数量与对应记录数量。
        用户可选择目标村庄，进入相应数据管理流程。
      </p>
      <img src="/assets/manual/首页统计.png" alt="首页统计" style="width: 100%; max-width: 600px; margin-top: 12px;" />
    </section>

    <!-- 3. 数据表管理 -->
    <section style="margin-bottom: 32px;">
      <h2>3. 数据表管理</h2>
      <p>
        在“行政区域选择”中，依次选择目标区、镇与村，点击“进入编辑”即可进入该村的表格管理界面，进行相关数据操作。
      </p>
      <img src="/assets/manual/进入对应表管理1.png" alt="表结构管理" style="width: 100%; max-width: 600px; margin-top: 12px;" />
      <img src="/assets/manual/进入对应表管理2.png" alt="表结构管理" style="width: 100%; max-width: 600px; margin-top: 12px;" />
    </section>

    <!-- 4. 数据录入与编辑 -->
    <section style="margin-bottom: 32px;">
      <h2>4. 数据录入与编辑</h2>
      <p>
        在选择具体数据表后，将进入数据录入页面，支持添加新记录、修改现有数据或删除记录。
        页面支持分页展示及关键词搜索，便于快速定位所需内容。
      </p>
      <img src="/assets/manual/数据录入与编辑1.png" alt="数据展示页" style="width: 100%; max-width: 600px; margin-top: 12px;" />

      <p style="margin-top: 12px;">编辑流程示例：</p>
      <p style="margin-top: 12px;">① 选择“建筑类”数据表：</p>
      <img src="/assets/manual/数据录入与编辑2.png" alt="选择建筑类表" style="width: 100%; max-width: 600px;" />

      <p style="margin-top: 12px;">② 点击“创建新表”按钮：</p>
      <img src="/assets/manual/数据录入与编辑3.png" alt="点击创建新表" style="width: 100%; max-width: 600px;" />

      <p style="margin-top: 12px;">③ 点击“查看结构”查看当前表结构字段：</p>
      <img src="/assets/manual/数据录入与编辑3-1.png" alt="点击查看结构" style="width: 100%; max-width: 600px;" />

      <p style="margin-top: 12px;">④ 进入表管理界面：</p>
      <img src="/assets/manual/数据录入与编辑4.png" alt="进行数据表的管理" style="width: 100%; max-width: 600px;" />

      <p style="margin-top: 12px;">⑤ 点击“管理数据”进入数据内容操作：</p>
      <img src="/assets/manual/数据录入与编辑4-1.png" alt="点击管理数据" style="width: 100%; max-width: 600px;" />

      <p style="margin-top: 12px;">⑥ 对具体记录进行新增、编辑、删除等操作：</p>
      <img src="/assets/manual/数据录入与编辑5.png" alt="对表数据进行管理" style="width: 100%; max-width: 600px;" />
    </section>

    <!-- 5. 高级搜索 -->
    <section style="margin-bottom: 32px;">
      <h2>5. 高级搜索</h2>
      <p>
        系统支持多维度筛选与分类统计功能。通过多层级行政区划选择器（支持村、组等层级）快速定位并查看目标数据。
      </p>
      <img src="/assets/manual/高级搜索.png" alt="高级搜索" style="width: 100%; max-width: 600px;" />
    </section>

    <!-- 6. 系统视频演示 -->
    <section style="margin-bottom: 32px;">
      <h2>6. 系统视频演示</h2>
      <p>以下为演示视频，展示系统的基本操作流程：</p>
      <video controls style="width: 100%; max-width: 600px; margin-top: 12px;">
        <source src="/assets/manual/demo.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
      </video>
    </section>

    <!-- 7. 注意事项 -->
    <section style="margin-bottom: 32px;">
      <h2>7. 注意事项</h2>
      <ul>
        <li>录入数据前请确认表名及数据类型是否正确，以避免信息混淆。</li>
        <li>删除操作不可恢复，请务必确认后再执行。</li>
        <li>统计信息可能存在短时延迟，建议刷新页面获取最新数据。</li>
      </ul>
    </section>

    <!-- 8. 联系支持 -->
    <section style="margin-bottom: 32px;">
      <h2>8. 联系支持</h2>
      <p>
        若在使用过程中遇到问题，请联系系统管理员或开发团队获取帮助与支持。
        系统功能：
1.系统简介：本系统用于斋堂镇的信息录入。
2.首页：在首页直观展示该系统已录入的全镇信息表的个数、记录的条数。
3.分类页：包含建筑类、人员类、设备类这三种类型表。
4.表页：

信息录入步骤：
1.进入“首页”：在“行政区划选择”下拉框，选择要进入的区域，然后点击“进入编辑”进入“分类页”：
2.当前位置是“分类页”：选择你要编辑的表的分类，点击“管理XX类表”进入“表页”：
3.当前位置是“表页”：
一、创建新表：可以创建新的表，并且为新的表添加列
二、查看结构：可以对已经创建的表删除和增加结构
三、管理数据：可以管理该表的数据（添加记录、编辑记录、删除记录）

注意：
1.如遇报错请刷新
2.所有删除不可逆，请谨慎操作
3.添加列若不成功，请检查默认值格式格式正确，或将该列数据类型用普通文字类型存储。

默认值：
数字类：默认值请填写为数字
文字类：默认值请填写为文本
选择框类：
日期格式：2025-01-01 22:22:22
下拉框格式：'选项一','选项二','选项三','选项四'
      </p>
    </section>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const goBackToHome = () => {
  if (router.currentRoute.value.path !== '/') {
    router.push('/')
  } else {
    ElMessage.info('已在首页')
  }
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.back-card {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #f5f7fa;
  border-radius: 12px;
  padding: 8px 16px;
  transition: all 0.2s ease;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}

.back-card:hover {
  background-color: #ecf5ff;
  transform: translateY(-1px);
}

.back-icon {
  margin-right: 8px;
  color: #2687e9;
  font-size: 18px;
}

.back-text {
  font-weight: 500;
  color: #000000;
  font-size: 16px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
}
</style>
